

<style >

    .vue-pagination *{

        font-family:"Segoe UI";

    }

    .vue-pagination li{

        list-style:none;

    }

    .vue-pagination a{

        text-decoration:none;

    }

    .vue-pagination {

        position: relative;



    }

    .vue-pagination li{

        display: inline-block;

        margin:0 5px;

    }

    .vue-pagination li a{

        padding:.5rem 1rem;

        display:inline-block;

        border:1px solid #ddd;

        background:#fff;

        color:#2750b1;

    }

    .vue-pagination li a:hover{

        background:#eee;

    }

    .vue-pagination li.active a:hover,

    .vue-pagination li.active a{

        background:#2750b1;

        color:#fff;

        cursor: text!important;

    }

    .vue-pagination li.disable a:hover,

    .vue-pagination li.disable a{

        background:#FFF;

        color:#999;

        cursor: text!important;

    }

    .vue-pagination li.text a:hover,

    .vue-pagination li.text a{

        background: #FFF;

        color: #555;

        border-color: #FFF;

    }

</style>



<script type="text/x-template" id="template-page">

<div>
    <ul class="vue-pagination" v-if="last>0">



        <li v-show="current <= 1" :class="{'disable': current == 1}" ><a>首页</a></li>

        <li v-show="current > 1 " @click="turnPage(1)" ><a href="javascript:void(0)">首页</a></li>



        <li v-show="current <= 1" :class="{'disable': current <= 1}" ><a>上一页</a></li>

        <li v-show="current > 1 " @click="turnPage(current - 1)" ><a href="javascript:void(0)">上一页</a></li>



        <li v-show="current > 4 " @click="turnPage(1)" ><a href="javascript:void(0)">1</a></li>

        <li v-show="current > 4" class="text" ><a>...</a></li>



        <li v-for="index in pages" @click="turnPage(index)" :class="{'active':current == index}" :key="index">

            <a v-if="current == index"  >{{index}}</a>

            <a v-if="current != index" href="javascript:void(0)" >{{index}}</a>

        </li>

        <li v-show="current < last - 4" class="text" ><a>...</a></li>

        <li v-show="last<=current " :class="{'disable': last<=current || last<=0}"><a >下一页</a></li>

        <li v-show="last>current " @click="turnPage(current + 1)"><a href="javascript:void(0)" >下一页</a></li>

    </ul>

    <ul class="vue-pagination" v-else>
        <li :class="{'disable': current == 1}" @click="turnPage(1)" ><a href="javascript:void(0)">首页</a></li>
        <li :class="{'disable': current == 1}" @click="turnPage(current - 1)" ><a href="javascript:void(0)">上一页</a></li>
        <li class="disable"><a>{{current}}</a></li>
        <li @click="turnPage(current + 1)"><a href="javascript:void(0)" >下一页</a></li>
    </ul>

</div>

</script>

<script>

    Vue.component("page", {

        template:"#template-page",

        props: [
            'value',
            'rows',
            'last'
        ],

        data:function() {
            return {
                current: this.value
            }
        },
        computed:{
            pages:function() {

                this.current = this.value;

                var pag = [];

                if( this.current < this.rows ){ //如果当前的激活的项 小于要显示的条数

                    //总页数和要显示的条数那个大就显示多少条

                    var i = Math.min(this.rows,this.last);

                    while(i){

                        pag.unshift(i--);

                    }

                }else{ //当前页数大于显示页数了

                    var middle = this.current - Math.floor(this.rows / 2 ),//从哪里开始

                            i = this.rows;

                    if( middle >  (this.last - this.rows)  ){

                        middle = (this.last - this.rows) + 1

                    }

                    while(i--){

                        pag.push( middle++ );

                    }

                }

                return pag

            }

        },

        methods:{

            turnPage: function(index){

                if(index == this.current) return;

                this.current = index;

                this.$emit('input', index);
                this.$emit('turn', index);

            }

        }

    });

</script>